import React from 'react';
import { Layout as AntLayout, Menu } from 'antd';
import { Outlet, useNavigate, useLocation } from 'react-router-dom';
import { routes } from '@/router/routes';

const { Header, Sider, Content } = AntLayout;

const Layout: React.FC = () => {
    const navigate = useNavigate();
    const location = useLocation();
    
    const menuItems = routes[0].children?.map(route => ({
        key: route.path,
        icon: route.icon,
        label: route.name,
    })) ?? [];
    
    return (
        <AntLayout style={{ minHeight: '100vh' }}>
            <Sider>
                <div className="logo" style={{ height: 32, margin: 16, background: 'rgba(255, 255, 255, 0.2)' }} />
                <Menu
                    theme="dark"
                    mode="inline"
                    selectedKeys={[location.pathname.split('/')[1]]}
                    items={menuItems}
                    onClick={({ key }) => navigate(key)}
                />
            </Sider>
            <AntLayout>
                <Header style={{ padding: 0, background: '#fff' }} />
                <Content style={{ margin: '24px 16px', padding: 24, background: '#fff' }}>
                    <Outlet />
                </Content>
            </AntLayout>
        </AntLayout>
    );
};

export default Layout; 